<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>张新同</title>
	</head>
    <style>
        html body {
            font-size: 40px;
            font-family: "微软雅黑";
            color: black;
            }
            i {
            color: black;
            font-size: 12px;
            }
            a {
            text-decoration: none;
            color: black;
            }
            * {
            margin: 0;
            padding: 0;
            }
            ul {
            list-style: none;
            }
            .fl {
            float: left;
            }
            .fr {
            float: right;
            }
            /*清除浮动*/
            .clearfix:before,
            .clearfix:after {
            content: " ";
            display: table;
            }
            .clearfix:after {
            clear: both;
            }
            .clearfix {
            *zoom: 1;
            /*IE/7/6*/
            }
            /*定位居中*/
            .middle {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            }
            .s-side {
            min-width: 200px;
            height: 100%;
            /* position: fixed;
            top: 0;
            left: 0; */
            margin: 100px auto;
            width: 100%;
            bottom: 0;
            /* background-color: #292929; */
            background-color: #fff ;
            box-shadow: 0px 0px 10px #aaa;
            padding: 10px;
            }
            .s-side .s-firstItem i {
            font-size: 20px;
            }
            .s-side .s-firstItem span {
            display: inline-block;
            margin-left: 10px;
            font-size: 20px;
            text-shadow: 0px 0px 5px #EEEEEE;
            white-space: 10px;
            }
            .s-side .first {
                padding: 10px 0px;
                border-bottom: 1px solid #424242;
            }
            .s-side .d-firstNav span {
            display: inline-block;
            margin-left: 10px;
            height: 100px;
            line-height: 100px;
            }
            .s-side .d-firstNav i.fr {
            font-size: 25px;
            }

            .s-secondNav:hover,.d-firstNav:hover{
                /* background-color: #ddd; */
            cursor: pointer;
            }
            .s-side .d-secondDrop {
            margin-left: 100px;
            margin-top: 10px;
            }
            .iconRotate {
            transform: rotate(90deg);
            transition: transform 0.2s;
            }
            .s-firstDrop,
            .s-secondDrop {
            display: none;
            }

            .d-firstDrop{
            /* background: #ddd; */
            background: #eee;
            }

            .s-side .s-secondNav,
            .s-side .s-secondItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 200px;
            /* line-height: 80px; */
            /* margin-left: 50px;
            margin-top: 10px; */
            margin: 10px 50px;
            }
            .span1{
            font-size: 50px;
            }
            #title{font-size: 60px;}
            .spec{
            border-top: 1px solid #aaa; 
            border-bottom: 1px solid #aaa; 
            }
            .d-secondNav input{
            background: yellow;
            font-size: 40px;
            height: 80px;
            line-height: 50pxz;
            width: 120px;
            }

            /* 蒙层 */
            #mc{
                width: 1000px;
                height: 1700px;
                background: gray;
                overflow: hidden;
                position: absolute;
                display: none;
            }
            .index{
                width: 150px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                background: #fff;
                margin-top: 500px;
                margin-left: 430px;
                
            }
    </style>
	<body>
        <div id="mc">
            <div class="index">
                <span class="f_index">0</span>
                -
                <span class="l_index">0</span>
            </div>
        </div>
	    <div class="s-side">
	        <ul>
	        	<!--这部分是导航栏信息。-->
	            <li class="s-firstItem first">
	                <a href="#">
	                    <i class="fa fa-home"></i>
	                    <span id="title">区块标题</span>
	                </a>
	            </li>
	            
	            <li class="first">
	                <div class="d-firstNav s-firstNav clearfix">
	                    <i class="fa fa-bars"></i>
	                    <span class="span1">一级标题</span>
	                    <i class="fa fa-caret-right fr "></i>
	                </div>
	                <ul class="d-firstDrop s-firstDrop">
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav spec">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                </ul>
	            </li>
	            <li class="first">
	                <div class="d-firstNav s-firstNav">
                   
	                    <span class="span1">一级标题</span>

	                </div>
	                <ul class="d-firstDrop s-firstDrop">
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav spec">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                </ul>
	            </li>
                <li class="first show">
                        查看剩余一级标题
                </li>

                <li class="first">
	                <div class="d-firstNav s-firstNav">
                   
	                    <span class="span1">一级标题</span>

	                </div>
	                <ul class="d-firstDrop s-firstDrop">
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav spec">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                </ul>
	            </li>
                <li class="first">
	                <div class="d-firstNav s-firstNav">
                   
	                    <span class="span1">一级标题</span>

	                </div>
	                <ul class="d-firstDrop s-firstDrop">
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav spec">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                </ul>
	            </li>
                <li class="first">
	                <div class="d-firstNav s-firstNav">
                   
	                    <span class="span1">一级标题</span>

	                </div>
	                <ul class="d-firstDrop s-firstDrop">
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav spec">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                    <li>
	                        <div class="d-secondNav s-secondNav">
	                            <div>
									<span>二级标题</span>
									<p>二级标题说明</p>
									<span>标签</span>
									<span>标签</span>
								</div>
	                            <input type="button" value="弹窗" class="alt">
	                        </div>
	                    </li>
	                </ul>
	            </li>
	        </ul>
	    </div>
	</body>
	<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js
    "></script>
    <script>
        $(function() {
            $('.d-firstNav').click(function(e) {
                // console.log("111");
                dropSwift($(this), '.d-firstDrop');	   
                e.stopPropagation();
            });
            $('.d-secondNav').click(function(e) {
                dropSwift($(this), '.d-secondDrop');
                e.stopPropagation();
            });
            
            
            
                /**
                 * @param dom   点击的当前元素
                 * @param drop  下一级菜单
                 */
                function dropSwift(dom, drop) {
                    //点击当前元素，收起或者伸展下一级菜单
                    
                    
                    dom.next().slideToggle();
                    
                    //设置旋转效果
                    
                    //1.将所有的元素都至为初始的状态		
                    dom.parent().siblings().find('.fa-caret-right').removeClass('iconRotate');
                    
                    //2.点击该层，将其他显示的下滑层隐藏		
                    dom.parent().siblings().find(drop).slideUp();
                    
                    var iconChevron = dom.find('.fa-caret-right');
                    if(iconChevron.hasClass('iconRotate')) {			
                        iconChevron.removeClass('iconRotate');
                    } else {
                        iconChevron.addClass('iconRotate');
                    }
                }
        })

        // console.log($(".alt").index())
        // $(".alt").on("click",function(){
        //     // console.log(101)

        // })

        $(".show").nextAll("li").css("display","none")
        $(".show").on("click",function(){
            $(this).nextAll("li").css("display","block")
            $(this).css("display","none")
        })
        var flag=0;
        $(".alt").on("click",function(event){
            event.stopPropagation();
            if(flag===0){
                // console.log(000)
                $("#mc").css("display","block")
                var index1=$(this).parent().parent().parent().parent().index()-1;
                // console.log(index1)
                var index2=$(this).parent().parent().index();
                // console.log(index2)
                $(".f_index").html(index1);
                $(".l_index").html(index2);
                flag=1;
            }
        })
        $(document).on("click",function(event){
            event.stopPropagation();
            if(flag===1){
                $("#mc").css("display","none")
                flag=0;
            }
        })
    </script>
</html>
